<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-router基础</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- router-link是vue提供的标签,默认会被渲染为a标签
              to属性被会渲染为href属性
              to属性中的值被渲染为采用#开头的hash地址
        -->
      <router-link to="/index">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <!-- 路由占位符(路由填充位) -->
      <router-view></router-view>
    </div>
    <script>
      //定义路由组件
      const index = {
        template: `<h1>主页内容</h1>`,
      };
      const news = {
        template: `<h1>新闻内容</h1>`,
      };
      //实例化路由对象
       const router = new VueRouter({
          //通过routes属性,定义路由规则
          routes: [
             {path:'/index',component:index} ,
             {path:'/news',component:news}
          ]
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //router:router
        router
      });
    </script>
  </body>
</html>
